Как сделать калькулятор для сайта без программирования с помощью stepFORM

Есть несколько методов как сделать ваш сайт более удобным, привлекательным и полезным для аудитории. Один из вариантов — добавить интерактивный опрос, форму или калькулятор, которые бы помогали посетителям решать определенные задачи или давали ответы на те или иные вопросы. Кроме улучшения юзабилити это позволит увеличить показатели конверсии и продаж.

Пару лет назад подобная функциональность казалась сложным и невыгодным вложением, так как для нее необходимо было обладать знаниями в программировании либо тратить деньги на разработку. Сейчас все намного проще — всего лишь надо найти онлнайн-конструктор форм, подходящий вашим требованиям, и реализовать свой проект в нем. При этом не требуется наличие специальных знаний, все максимально доступно. В качестве примера возьмем конструктор stepFORM, с помощью которого попробуем создать ваш первый калькулятор для сайта.

Основные преимущества платформы stepFORM:

• она подходит для бизнес проектов разных тематик: сфера доставки (еды, цветов), услуги по ремонту/перевозке, проведение мероприятий, набор персонала и др.;
• ее могут использовать и фрилансеры, и веб-студии;
• в системе есть визуальный конструктор, максимально упрощающих работу пользователям;
• имеются решения для популярных CMS либо можно интегрировать готовый HTML-код в любую веб-страницу;
• доступны уведомления по email / sms;
• поддерживается адаптивность;
• есть защита от спама и некоторые другие полезные фишки (весь список ищите на их сайте).

Начало работы с конструктором

Переходим на главную страницу сервиса https://stepform.io/ и нажимаем на кнопку «Создать бесплатно». Справа появится вкладка для быстрой регистрации в несколько кликов — там вводим имя, email, пароль и потом нажимаем «Создать аккаунт».

После этого мы сразу переходим в панель администрирования, где можем выбрать один из двух путей:

• «Создать пустую форму» — начать разработку с нуля.
• «Создать из шаблона» — использовать уже готовую заготовку и переделывать ее под себя.

В нашем примере ниже мы разберем процесс разработки квиз-калькулятора для сферы доставки цветов, и чтобы было нагляднее, будем разрабатывать его с нуля (т.е. используем первый способ).

Под термином «квиз-калькулятора» (quiz) подразумевается специальная форма (чаще всего пошаговая), которая используется для получения заказов с сайта и включает в себя: 1) выбор разных параметров по предоставляемым вами услугам; 2) предварительный просчет их стоимости; 3) поля для отправки контактов посетителя.

После определения метода создания формы сервис перебрасывает нас на страницу конструктора, где мы уже сможем начать собирать и настраивать наш проект.

Разработка квиз-калькулятора

В первую очередь добавим виджеты:

• «Сообщение» — где укажем заголовок калькулятора.
• «Выбор изображений» — тут будут картинки товаров и описания к ним (также произведем настройку самого виджета, задав ему 3 колонки).

Первая страничка нашей quiz формы готова, для создания второй страницы кликнем на «+».

На следующей странице используем те же виджеты («Сообщение» и «Выбор изображений»), только для второго выберем уже 4 колонки. Вот что у нас получится:

Следующим шагом будет добавление калькуляции стоимости товаров, для этого на каждую страницу добавим виджет «Формула» и пропишем в нем необходимые значения.

Далее создадим общую страничку с формулами, где пользователь увидит отдельную и полную стоимость заказа.

Далее добавим в форму шаг для сбора данных и оформления заказа. На этом этапе нам необходимо узнать:

• имя/номер заказчика;
• имя/номер получателя;
• адрес получателя;
• дата и время доставки.

Для этого воспользуемся аналогичными виджетами:

• «Текстовый ввод».
• «Моб. телефон».
• «Дата и время».

По итогу страница будет выглядеть так:

Осталась самая малость — подобрать дизайн. Для этого откроем панель дизайна и определим необходимые нам цвета и шрифт.

На последнем этапе перейдем в «Настройки» и активируем поле «Email», чтобы мы получали данные о заказе и могли связываться с клиентами.

Теперь квиз-форма полностью готова, и мы можем ее использовать. Получившийся результат из примера доступен для просмотра по данной ссылке: https://app.stepform.io/CRnQiw0.

Интеграция формы на сайт

Вставить квиз-калькулятор на ваш веб-проект также довольно просто, для этого необходимо перейти во вкладку «Публикация» и выбрать желаемый вариант размещения:

• через Javascript код;
• через iFrame;
• или как Popup.

Кстати, форму можно использовать по прямой ссылке и поделиться ею в соц.сетях. Также ее легко установить на платформы WordPress и Joomla с помощью соответствующих плагинов.

Итого. Если у вас в коммерческом веб-проекте еще нет квиз формы или калькулятора стоимости услуг, то самое время их добавить. Тем более, что как вы могли убедиться сами, в наше время это сделать совсем не сложно, и не требуется никаких знаний в области разработки. С помощью специальных конструкторов по типу stepFORM весь процесс создания будет простым и займет минимум времени. В конце концов, вы получите хорошую возможность увеличить конверсию площадки и сделать ее более полезной для своей ЦА. Кстати, в сервисе есть полностью бесплатный тариф для начинающих.